<template>
	<view class="perInfo">
		<view class="main">
			<view class="items">
				<view class="label">头像</view>
				<view class="val"  @tap="changeAvatar">
					<u-avatar :src="face" mode="circle" size="50"  ></u-avatar>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="items" v-for="(item,index) in list" :key="item.word">
				<view class="label">{{item.word}}</view>
				<view class="val" @click="goTo(item.url)">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<!-- 头像选择弹出框 -->
		<!-- <u-popup v-model="headShow" @close="close" mode="bottom" class="select-head">
			<view>
				<view class="head-row" @tap="chooseHead(1)">
					<text>相册</text>
				</view>
				<view class="head-row" @tap="chooseHead(2)">
					<text>拍照</text>
				</view>
				<view class="cancel" @tap="close">
					<text>取消</text>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	// import {API} from '@/config/myApi.js';
	import storage from '../../../../utils/storage';
	import { lk_common } from '../../../../config/myConfig.js';
	export default {
		data() {
			return {
				list: [{
						word: '擅长领域',
						url: '/pages/tabbar/user/personalCenter/areasOfExpertise'
					},
					{
						word: '个人简介',
						url: '/pages/tabbar/user/personalCenter/perEdit'
					},
				],
				// 头像
				headShow: false,
				// face:this.$store.u_centerData ? this.$store.u_centerData.face : '',
				face:this.$store.state.userInfo ? this.$store.state.userInfo.face : '',
			};
		},
		onShow() {
				this.$store.dispatch('A_u_center')
				this.$forceUpdate()
		},
		onLoad() {
			// this.$store.dispatch('A_u_center')
			// this.$forceUpdate()
			// API.u_center().then(res =>{
			// 	if(res.code === 200){
			// 		// storage.setU_Center(res.result);
			// 		// this.$store.commit ('M_u_center',res.result)
			// 		// this.face = res.result.face;
			// 		console.log('个人中心专家用户信息',res.result);
			// 	}
			// })
		},
		methods: {
			goTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			changeAvatar() {
				uni.showActionSheet({
					itemList:['相册','拍照'],
					success:(res)=> {
						// 相册
						if(res.tapIndex === 0) {
							this.chooseHead(1)
						}
						// 拍照
						if(res.tapIndex === 1) {
							this.chooseHead(2)
						}
					}
				})
				return
				//更换head地址
				this.headShow = true;
			},
			chooseHead(code) {
				//code为1调用相册,code为2调用相机
				// if (code == 1) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType:code ===1?['album'] :['camera'], //这要注意，camera是拍照，album是打开手机相册
						success: (res) => {
							// console.log(res);
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: `${lk_common}/common/common/upload/file`, //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[0],
								name: 'file',
								header: {
								   "accessToken": storage.getAccessToken(),
							    },
								success: (uploadFileRes) => {
									this.face = JSON.parse(uploadFileRes.data).result;
									API.editOwn({face:this.face}).then(res =>{
										if(res.code === 200) {
										// console.log(res);
											this.$store.dispatch('A_userInfo')
										}
									})
									// console.log('上传后三抽柜',uploadFileRes.data);
								},
							});
							// this.$forceUpdate();
							this.headShow = false;
						}
					});
			// 	} else if (code == 2) {
			// 		uni.chooseImage({
			// 			count: 1,
			// 			sizeType: ['original', 'compressed'],
			// 			sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
			// 			success: (res) => {
			// 				// console.log(res);
			// 				const tempFilePaths = res.tempFilePaths;
							
			// 				// uni.uploadFile({
			// 				// 	url: `${lk_common}/common/common/upload/file`, //仅为示例，非真实的接口地址
			// 				// 	filePath: res.tempFilePaths[0],
			// 				// 	name: 'file',
			// 				// 	formData: {
			// 				// 		'file': 'file'
			// 				// 	},
			// 				// 	success: (uploadFileRes) => {
			// 				// 		console.log('上传后三抽柜',uploadFileRes.data);
			// 				// 	}
			// 				// });
			// 				// this.$forceUpdate();
			// 				this.headShow = false;
							
			
			// 			}
			// 		});
				// }
			},
			//弹出框的关闭
			close() {
				this.show = false;
				this.headShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.perInfo {
		padding: 24rpx 30rpx;
		box-sizing: border-box;
	}

	.main {
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 14rpx;

		.items {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 110rpx;
			border-top: 1px #E3E3E3 solid;
			font-size: 30rpx;

			&:nth-child(1) {
				border: none;
			}

			.label {
				width: 30%;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.val {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;

				/deep/.u-iconfont {
					margin-left: 17rpx;
				}
			}

		}
	}
	.select-head {
		width: 710rpx;
		margin: 0rpx auto 40rpx;
		overflow: hidden;
		/deep/.u-drawer-content {
			border-radius: 10rpx !important;
			overflow: hidden;
		}
		.sex-row,
		.head-row {
			height: 113rpx;
			text-align: center;
			line-height: 113rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
		.cancel {
			height: 100rpx;
			line-height: 100rpx;
			color: #666666;
			font-weight: 100;
			text-align: center;
			border-top: 1rpx solid #E3E3E3;
		}
	}
</style>
